import React from 'react';
import { useNavigate } from 'react-router-dom';
import {
  CodeOutlined,
  FieldTimeOutlined,
  FileTextOutlined,
  FilePdfOutlined,
  LinkOutlined,
  NumberOutlined,
  ToolOutlined,
  TranslationOutlined
} from '@ant-design/icons';

const ToolCard = ({ icon, title, description, path, tag }) => {
  const navigate = useNavigate();
  
  const handleClick = () => {
    if (path) {
      navigate(path);
    }
  };
  
  return (
    <div className={`tool-card ${!path ? 'disabled' : ''}`} onClick={handleClick}>
      <div className="tool-icon">{icon}</div>
      <h3 className="tool-title">{title}</h3>
      <p className="tool-description">{description}</p>
      {tag && <div className="tool-tag">{tag}</div>}
    </div>
  );
};

const Home = () => {
  const tools = [
    {
      icon: <FileTextOutlined />,
      title: 'Base64',
      description: '文本编码转换工具',
      path: '/base64'
    },
    {
      icon: <FieldTimeOutlined />,
      title: '时间戳',
      description: '时间格式转换工具',
      path: '/timestamp'
    },
    {
      icon: <CodeOutlined />,
      title: 'JSON',
      description: 'JSON格式化工具',
      path: '/json'
    },
    {
      icon: <FilePdfOutlined />,
      title: 'PDF转换',
      description: 'PDF与Word互转工具',
      path: '/pdf'
    },
    {
      icon: <LinkOutlined />,
      title: 'URL编码',
      description: 'URL编码转换工具',
      tag: '待实现'
    },
    {
      icon: <TranslationOutlined />,
      title: 'Unicode',
      description: 'Unicode编码转换',
      tag: '待实现'
    },
    {
      icon: <NumberOutlined />,
      title: '进制转换',
      description: '进制转换计算工具',
      tag: '待实现'
    },
    {
      icon: <ToolOutlined />,
      title: '其他工具',
      description: '更多实用小工具',
      tag: '待实现'
    }
  ];

  return (
    <div className="tools-container">
      <div className="page-header">
        <h1 className="page-title">小工具箱</h1>
        <p className="page-subtitle">一站式解决常见的开发工具需求</p>
      </div>
      <div className="tools-grid">
        {tools.map((tool, index) => (
          <ToolCard key={index} {...tool} />
        ))}
      </div>
    </div>
  );
};

export default Home;
